<template>
  <div class="newsInfo-container">
    <h1 class="title">{{newsInfo.title}} </h1>
    <p class="subtitle">
      <span>发表时间：{{ newsInfo.add_time | dateFormat}}</span>
      <span>点击次数：{{ newsInfo.click}}次</span>
    </p>
    <hr>
    <!-- content中的内容为html标签格式，所以用v-html指令渲染 -->
    <div class="content" v-html="newsInfo.content"></div>
    <comment :commentsId="id"></comment>
  </div>
</template>

<script>
import comment from '../subcomponents/comments.vue'
export default {

  data () {
    return {
      id: this.$route.params.id,
      newsInfo :{},
    }
  },

  methods: {
    getNewsInfo(){
      this.$http.get('http://www.liulongbin.top:3005/api/getnew/'+this.id).then(result=>{
        if(result.body.status == 0){
          this.newsInfo = result.body.message[0];
        }else{
          Toast('获取新闻详情失败')
        }
      })
    }
  },

  created () {
    this.getNewsInfo()
  },
  components: {
    'comment':comment
  }
}
</script>

<style lang='less' scoped>
  .newsInfo-container{
    padding: 0 4px;
    .title{
      font-size: 16px;
      color: red;
      margin: 15px 0;
      text-align: center;
    }
    .subtitle{
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }
    .content{
      // 如果有图片但图片不能完全显示 将图片宽度设置为100%后 去掉顶部的scoped 类名限制不会有全局污染
    }
  }
</style>
